<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10">
      <!-- 订单明细资料 -->
      <el-card :body-style="{ padding: '10px' }">
        <!-- 标题 -->
        <div slot="header" class="f16 mb9">
          <span style="font-weight: 600">订单明细资料</span>
        </div>
        <!-- 订单明细资料表格 -->
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          :TableHeight="100"
          :outTableHeight="100"
          :isLoading="isLoading"
          @currentRow="currentRow"
          @selectList="selectTableList"
        />
      </el-card>

      <!-- 补制明细 -->
      <el-card :body-style="{ padding: '10px' }">
        <!-- 标题 -->
        <div slot="header" class="f16 mb9">
          <span style="font-weight: 600">补制明细</span>
        </div>
        <!-- 补制明细表格 -->
        <Table :tableHeader="tableHeader2" :tableData="tableData2" :TableHeight="100" :outTableHeight="100" />
        <!-- 分页器 -->
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '10px' }">
      <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LoginWork from '@/utils/LoginWork'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'OutsourcingUnitPrice'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import Api from '@/api/GeneralManager/Factory/OutsourcingUnitPrice'
import { onMounted, watch } from 'vue'
import { TableList, selectList, type TableListType } from '@/plugins/mixin'
import { debounce } from 'lodash'

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工艺',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },

  {
    type: 'date',
    dateLabel: '建档日期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '未审核',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已审核',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '打勾记录审核'
  },
  {
    type: 'button',
    checkboxLabel: '打勾取消审核'
  }
]) as any

const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const tableData = ref([]) as any
const tableData2 = ref([])
const imgList = ref<string[]>([])
const isLoading = ref(false)
// 未审核已审核
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未审核')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已审核')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return '0'
  } else if (Audited.checked) {
    return '1'
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const getTableList = debounce(async () => {
  isLoading.value = true
  const res = (await service.put('/pcFactorWork/listOutHead', {
    lotNo: formList.value.find((item: any) => item.type === 'input' && item.inputPlaceholder === '请输入指令')?.inputValue,
    style: formList.value.find((item: any) => item.type === 'input' && item.inputPlaceholder === '请输入型体')?.inputValue,
    process: formList.value.find(
      (item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工艺'
    )?.selectValue,
    vendor: formList.value.find((item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '厂商')
      ?.selectValue,
    startSysDate: formList.value.find((item: any) => item.type === 'date' && item.dateLabel === '建档日期')?.dateValue[0],
    endSysDate: formList.value.find((item: any) => item.type === 'date' && item.dateLabel === '建档日期')?.dateValue[1],
    flag: cfmFlag(),
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })) as any
  // let { Data, dataList, srcList } = (await TableList(formList, Api.getTableList, currentPage.value, pageSize.value)) as TableListType
  tableData.value = res.list
  total.value = res.total
  imgList.value = res.list.map((item: any) => {
    return item.photoPath
  })
  isLoading.value = false
}, 500)
const getSelectList = async () => {
  const process = formList.value[2].selectValue
  const vendor = formList.value[3].selectValue
  await selectList(formList, () => service.post<any, string[]>(`/pcFactorWork/listOutVendor?vendor=${vendor}&process=${process}`))
  currentRow()
}
onMounted(async () => {
  getTableList()
  getSelectList()
})

const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '打勾记录审核') {
    if (selectedLists.value.length === 0) {
      JMessage.warning('请勾选数据')
      return
    }
    const res = (await LoginWork.put(`/pcFactorWork/listOutDetailCheck?flag=${1}`, selectedLists.value)) as any
    if (res.code === 200) {
      JMessage.success('审核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '打勾取消审核') {
    if (selectedLists.value.length === 0) {
      JMessage.warning('请勾选数据')
      return
    }
    const res = (await LoginWork.put(`/pcFactorWork/listOutDetailCheck?flag=${0}`, selectedLists.value)) as any
    if (res.code === 200) {
      JMessage.success('审核成功')
    } else {
      JMessage.error(res.message)
    }
  }
  getTableList()
}

// 表格1数据
const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    width: '100px',
    label: '型体',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数',
    prop: 'orderNum'
  },
  {
    width: 125,
    label: '厂商',
    prop: 'vendor'
  },
  {
    label: '检核标记',
    prop: 'cfmFlag'
  },
  {
    label: '审核',
    prop: 'checkFlag'
  },
  {
    width: 120,
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList
  }
])
const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}
// 表格2数据
const tableHeader2 = ref([
  {
    label: '工艺',
    prop: 'process'
  },
  {
    label: '部位名称',
    prop: 'partName',
    width: 150
  },
  {
    label: '片数',
    prop: 'cutNum'
  },
  {
    label: '建档日期',
    prop: 'purDate'
  },
  {
    label: '单价',
    prop: 'price'
  },
  {
    label: '备注',
    prop: 'purMemo'
  },
  {
    label: '检核人员',
    prop: 'cfmUser'
  }
])
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  let data = await Api.getTableList2({
    color: row.color,
    lotNo: row.lotNo,
    style: row.style,
    vendor: row.vendor
  })
  tableData2.value = data.price
}
</script>

<style lang="less" scoped>
table {
  table-layout: auto !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}
</style>
